<script setup lang="ts">
import Docxtemplater from "docxtemplater";
import PizZip from "pizzip";
import { saveAs } from "file-saver";
import { ref } from "vue";

defineProps<{}>();

const userName = ref("");

const exportToWord = async () => {
  try {
    // 1. 加载模板文件
    const response = await fetch("/template.docx"); // 这里是去路径下拿模板了
    const templateData = await response.arrayBuffer();
    // 2. 初始化 PizZip 和 Docxtemplater
    const zip = new PizZip(templateData);
    const doc = new Docxtemplater(zip, {
      paragraphLoop: true,
      linebreaks: true,
    });

    // 3. 设置模板数据，并传入模板实例
    let user = {
      sex: "难",
      phone: "12345678900",
      name: userName.value,
      identity: "410XXXXXXXXXXXX",
    };
    // doc.setValues(data);
    // 4. 渲染文档
    doc.render({ ...user });

    // 5. 生成 Word 文件
    const out = doc.getZip().generate({ type: "blob" });
    saveAs(out, "output.docx"); // 保存文件，文件名为 output.docx（可自行加工）
  } catch (error) {
    console.error("导出 Word 文档失败:", error);
  }
};

const handleGenerateWord = () => {
  // 一些其他代码
  exportToWord();
};
</script>

<template>
  <div>
    <input type="text" v-model="userName" />
    // 直接绑定组件
    <button @click="generateWord">生成 word 文档</button>

    // 并非直接绑定也非常自由了
    <button @click="handleGenerateWord">生成 word 文档</button>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
